<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.editable-select.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.editable-select.basicDemo.description' | translate }}</div>
    <d-codebox [sourceData]="BasicSource">
      <d-with-source demo></d-with-source>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'object-source'">
    <div class="devui-demo-title">{{ 'components.editable-select.objectDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.editable-select.objectDemo.description' | translate }}</div>
    <d-codebox [sourceData]="ObjectSource">
      <d-object-source demo></d-object-source>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'disable-data-with-source'">
    <div class="devui-demo-title">{{ 'components.editable-select.disableDataDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.editable-select.disableDataDemo.description' | translate }}</div>
    <d-codebox [sourceData]="DisableDataSource">
      <d-disable-data-with-source demo></d-disable-data-with-source>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'with-search-function'">
    <div class="devui-demo-title">{{ 'components.editable-select.searchFunctionDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.editable-select.searchFunctionDemo.description' | translate }}</div>
    <d-codebox [sourceData]="SearchFnSource">
      <d-with-search-function demo></d-with-search-function>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'async-data-with-function'">
    <div class="devui-demo-title">{{ 'components.editable-select.async-data-function.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.editable-select.async-data-function.description' | translate }}</div>
    <d-codebox [sourceData]="AsyncDataSearchFnSource">
      <d-async-data-with-function demo></d-async-data-with-function>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'lazy-load'">
    <div class="devui-demo-title">{{ 'components.editable-select.lazyLoadDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.editable-select.lazyLoadDemo.description' | translate }}</div>
    <d-codebox [sourceData]="LazyLoadComponentSource">
      <d-lazy-load demo></d-lazy-load>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'custom-area-usage'">
    <div class="devui-demo-title">{{ 'components.editable-select.customAreaDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.editable-select.customAreaDemo.description' | translate }}
    </div>
    <d-codebox id="components-editable-select-custom-area" [sourceData]="customAreaSourceData">
      <d-editable-select-custom-area demo></d-editable-select-custom-area>
    </d-codebox>
  </div>
</div>
